<template>
  <view class="error-questions-container">
    <view class="page-title">错题本</view>
    <view class="action-bar">
      <button class="clear-btn" @click="clearAllErrorQuestions">清空错题</button>
    </view>
    <view class="error-list" v-if="errorQuestions.length > 0">
      <view class="question-item" v-for="(question, index) in errorQuestions" :key="question.id">
        <view class="question-number">第 {{ index + 1 }} 题</view>
        <view class="question-text">{{ question.question }}</view>
        <view class="options">
          <view
            class="option-item"
            :class="{ correct: question.correctOption === i, wrong: question.selectedOption === i }"
            v-for="(option, i) in question.options"
            :key="i"
          >
            {{ option }}
          </view>
        </view>
        <view class="answer-info">
          <text>正确答案: {{ question.options[question.correctOption] }}</text>
          <text v-if="question.selectedOption !== null"
            >你的答案: {{ question.options[question.selectedOption] }}</text
          >
        </view>
      </view>
    </view>

    <view class="empty-state" v-else>
      <image src="@/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无错题</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { getErrorQuestions, clearErrorQuestions } from '@/utils/localStorage'

type ErrorQuestion = {
  id: string
  question: string
  options: string[]
  correctOption: number
  selectedOption: number | null
  createTime: string
  grade: string
  type: string
}

// 错题列表
const errorQuestions = ref<ErrorQuestion[]>([])

// 获取错题列表
const loadErrorQuestions = () => {
  try {
    const questions = getErrorQuestions()
    // 按创建时间倒序排列（最新的错题在前面）
    questions.sort(
      (a: ErrorQuestion, b: ErrorQuestion) =>
        new Date(b.createTime).getTime() - new Date(a.createTime).getTime(),
    )
    errorQuestions.value = questions
  } catch (error) {
    uni.showToast({
      title: '获取错题列表失败',
      icon: 'none',
    })
  }
}

// 清空所有错题
const clearAllErrorQuestions = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空所有错题吗？',
    success: (res) => {
      if (res.confirm) {
        clearErrorQuestions()
        errorQuestions.value = []
        uni.showToast({ title: '错题已清空', icon: 'success' })
      }
    },
  })
}

// 页面加载时获取错题列表
onMounted(() => {
  loadErrorQuestions()
})

// 页面卸载时清空错题
onUnmounted(() => {
  // clearErrorQuestions()
})
</script>

<style lang="scss">
.error-questions-container {
  padding: 30rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333;
}

.error-list {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-item {
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.question-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.question-number {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.question-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  margin-bottom: 20rpx;
}

.option-item {
  height: 70rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding-left: 20rpx;
  line-height: 70rpx;
  color: #333;
}

.option-item.correct {
  border-color: #52c41a;
  background-color: #f6ffed;
  color: #52c41a;
}

.option-item.wrong {
  border-color: #f5222d;
  background-color: #fff2f0;
  color: #f5222d;
}

.answer-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.answer-info text {
  font-size: 26rpx;
  color: #666;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500rpx;
}

.empty-state image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-state text {
  font-size: 28rpx;
  color: #999;
}

// 适配不同屏幕尺寸
@media screen and (min-width: 768px) {
  .error-questions-container {
    max-width: 600rpx;
    margin: 0 auto;
  }
}

.action-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20rpx;
}

.clear-btn {
  width: 180rpx;
  height: 60rpx;
  background-color: #f5222d;
  color: #fff;
  font-size: 26rpx;
  line-height: 60rpx;
  padding: 0;
  margin: 0;
}
</style>
